<template>
	<view v-if="dataList">
		<view v-for="item in dataList" :key="itemKet(item)">
			<view class="itemBox">
				<view class="imgbox">
					<image :src="item.thum[0].path" mode="aspectFill" class="img"></image>
				</view>
				<view class="skuContent">
					<view class="title lm1">{{ item.name }}</view>
					<view class="title lm1" v-if="item.skulist">{{ item.skulist.join('/') }}</view>
					<view class="money c9 lm1">{{ item._id.value }}</view>
					<view class="cr money">
						￥ {{ priceFrom(item.money) }}
						<text class="c9 delMoney">￥{{ priceFrom(item.deMoney) }}</text>
					</view>
					<view class="sku">
						<view></view>
						<view>
							<!-- <view class="skutag">选规格</view> -->
							<view>
								<step :item="item"></step>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useCounterStore } from '../../stores/shop/car';
import step from '../tool/step/step.vue';
import { priceFrom } from '../../utils/tools.js';
let dataList = useCounterStore().cardList;

console.log(dataList);
const itemKet = (item) => {
	return item._id + item.skuNameList;
};
</script>

<style lang="scss" scoped>
.itemBox {
	display: flex;
	margin: 20rpx;

	.imgbox {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.skuContent {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;

		.title {
			font-size: $uni-font-size-base;
		}

		.money {
			font-size: $uni-font-size-base;

			.delMoney {
				font-size: $uni-font-size-sm;
				text-decoration: line-through;
			}
		}

		.sku {
			position: absolute;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;

			.tag {
				border: 1px solid $uni-tag-color;
				border-radius: 10rpx;
				font-size: $uni-border-radius-sm;
				padding: 5rpx 8rpx;
			}

			.skutag {
				background-color: $uni-tag-color;
				color: #fff;
				font-size: $uni-border-radius-sm;
				vertical-align: middle;
				padding: 5rpx 8rpx;
			}
		}
	}
}
</style>
